<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信息</title>
<link rel="stylesheet" href="message.css">
<script type="text/javascript" src="../../../res/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
      var ws;
      var SocketCreated = false;
      var isUserloggedout = false;
      
	function findSession(){
		var url="../../../role/getUserName.action";
		var data=null;
		$.post(url,data,function(mes){
			$("#txtName").val(mes.userName);
		},"json")
	}
	
      function lockOn(str) 
      { 
         var lock = document.getElementById('skm_LockPane'); 
         if (lock) 
            lock.className = 'LockOn'; 
         lock.innerHTML = str; 
      } 

      function lockOff()
      {
         var lock = document.getElementById('skm_LockPane'); 
         lock.className = 'LockOff'; 
      }

      function ToggleConnectionClicked() {
            if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
                SocketCreated = false;
                isUserloggedout = true;
                ws.close();
            } else {
                try {
                    if ("WebSocket" in window) {
                    	ws = new WebSocket("ws://" + document.getElementById("Connection").value);
                    }
                    else if("MozWebSocket" in window) {
                    	ws = new MozWebSocket("ws://" + document.getElementById("Connection").value);
                    }
                    
                    SocketCreated = true;
                    isUserloggedout = false;
                } catch (ex) {
                    Log(ex, "ERROR");
                    return;
                }
                ws.onopen = WSonOpen;
                ws.onmessage = WSonMessage;
                ws.onclose = WSonClose;
                ws.onerror = WSonError;
            }
        };


        function WSonOpen() {
            lockOff();
            $("#SendDataContainer").show();
   			    ws.send("login:" + document.getElementById("txtName").value);
        };

        function WSonMessage(event) {
            Log(event.data);            
        };

        function WSonClose() {
            lockOff();
            if (isUserloggedout)
                Log("【"+document.getElementById("txtName").value+"】离开了聊天室！");
            $("#SendDataContainer").hide();
        };

        function WSonError() {
            lockOff();
        };


        function SendDataClicked() {
            if (document.getElementById("DataToSend").value.trim() != "") {
                ws.send(document.getElementById("txtName").value + "说 :\"" + document.getElementById("DataToSend").value + "\"");
                document.getElementById("DataToSend").value = "";
            }
        };


        function Log(Text, MessageType) {
            if (MessageType == "OK") Text = "<span style='color: green;'>" + Text + "</span>";
            if (MessageType == "ERROR") Text = "<span style='color: red;'>" + Text + "</span>";
            document.getElementById("LogContainer").innerHTML = document.getElementById("LogContainer").innerHTML + Text + "<br />";
            var LogContainer = document.getElementById("LogContainer");
            LogContainer.scrollTop = LogContainer.scrollHeight;
        };


        $(document).ready(function () {
            $("#SendDataContainer").hide();
            var WebSocketsExist = true;
            try {
                var dummy = new WebSocket("ws://localhost:8989/test");
            } catch (ex) {
                try
                {
                	webSocket = new MozWebSocket("ws://localhost:8989/test");
                }
                catch(ex)
                {
                	WebSocketsExist = false;
                }
            }

            if (WebSocketsExist) {
                document.getElementById("Connection").value = "192.168.43.41:4141/chat";
            } else {
                document.getElementById("ToggleConnection").disabled = true;
            }    
            
            $("#DataToSend").keypress(function(evt)
            {
            		if (evt.keyCode == 13)
            		{
            				$("#SendData").click();
            				evt.preventDefault();
            		}
            })  
            ToggleConnectionClicked();
            findSession();
        });

    </script>
</head>
<body>
<div id="big">
	<div id="skm_LockPane" class="LockOff"></div>
    <form id="form1" runat="server">
	    <input type="hidden" id="Connection" value="192.168.8.101:4141/chat" />
	    <input type="hidden" id="txtName" />
		<div id="big">
			<div id="body">
				<div id='LogContainer' class='container'>
					<div id="div"><span>零 食 进 销 系 统</span></div>
					<ul>
						<li id="p"><a href="#">聊天</a></li>
						<li><a href="#">公告</a></li>
						<li><a href="#">相册</a></li>
						<li><a href="#">文件</a></li>
						<li><a href="#">活动</a></li>
						<li><a href="#">设置</a></li>
						<span class="span"><img src="菜单.png" width="25px" height="25px"/></span>
						<span class="span"><img src="加.png" width="20px" height="20px"/></span>
						<span class="span"><img src="电话.png" width="20px" height="20px"/></span>
						<br/>
					</ul>
					<p> </p>
					<hr/>
				</div>
				<br/>
				<div id="text">
					<ul id="ul">
						<li><a href="#"><img src="img/笑脸.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/摄像.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/13剪切.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/文件.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/相册.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/匿名用户.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/gift.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/红包.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/铃铛.png" width="20px" height="20px"/></a></li>
						<li><a href="#"><img src="img/图标_更多菜单.png" width="20px" height="20px"/></a></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li><a href="#"><img src="img/时钟.png" width="20px" height="20px"/></a></li>
					</ul>
					<textarea id="DataToSend"  style="resize:none" ></textarea>
					<button id='close' type="button" >关闭</button>
					<button id='SendData' type="button" onclick='SendDataClicked();'>发送</button>
				</div>
			</div>
		</div>
	</form>
	</div>
</body>
</html>